<style lang=sass>
@import "../../assets/sass/message/message.scss";
</style>

<template>
	<div class="vue-message vue-message-center" v-bind:class="className"  :transition="transition" v-show="visible">
    <div class="vue-message-header">{{{title}}}</div>
    <div class="vue-message-body">{{{content}}}</div>
    <div class="vue-message-footer">
    <div class="vue-message-btn" @click="ok">{{okText}}</div>
    <div class="vue-message-btn" @click="cancel">{{cancelText}}</div>
    </div>
  </div>
  <Mask v-show="visible"></Mask>
</template>


<script>
import Mask from "../mask/mask"

export default {
  props:{//继承父级组件参数
    title:String,
    content:String,
    className:String,
    transition:String,
    okText:{
        type:String,
        default:"确定"
    },
    cancelText:{
        type:String,
        default:"取消"
    },
    visible:{
        type:Boolean,
        default:false,
        twoWay:true
    }
  },
  components:{
      Mask//依赖组件Mask
  },
  methods:{
      ok(){
          this.visible=false;
          this.$emit("ok");
      },
      cancel(){
          this.visible=false;
          this.$emit("cancel");
      }
  }
}
</script>


